{% extends 'base.html' %}
{% block title %}
    用户注册
{% endblock %}
{% block style %}
    <style>
        #container {
            width: 900px;
            height: 400px;
            margin: 0 auto;
        }
        #sexWoman {
            margin-left: 15px;
        }
        #sexDiv {
            margin-top: 5px;
        }
    </style>
{% endblock %}
{% block content %}
    <div id="container">
        <span style="color: red; font-size: 14px">{{ msg }}</span>
        <form class="form-horizontal" action="{{ url_for('user.userRegister') }}" method="post">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" name="userName" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <label for="repassword" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="repassword" name="rePassword" placeholder="再次输入密码">
                </div>
            </div>
            <div class="form-group">
                <label for="sex" class="col-sm-2 control-label">性别</label>
                <div id="sexDiv" class="col-sm-10">
                    <input type="radio" id="sexMan" name="sex" value="1" checked>&nbsp;&nbsp;man
                    <input type="radio" id="sexWoman" name="sex" value="2">&nbsp;&nbsp;woman
                </div>
            </div>
            <div class="form-group">
                <label for="phone" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号">
                    <span></span>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary">注册</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
{% block myjs %}
    <script>
        $('#phone').blur(function () {
            let phone_num = $(this).val();
            let span_text = $(this).next('span');
            span_text.text('')
            span_text.css({"color": "red", "font-size": "12px"});
            $.get('{{ url_for('user.phoneCheck') }}', {phone_num: phone_num}, function (data) {
                console.log(data);
                if (data.code !== 200) {
                    span_text.text(data.msg)
                }
            })
        })
    </script>
{% endblock %}